<template>
  <div class="online-frame">
    <div>在线用户({{onlineUser.length}})，点击快速发起会话(同步时间：{{getTime}})：</div>
    <!-- <div v-if="!isConnect">
      <button @click="reConnect">点击尝试重新连接</button>
      {{printMsg}}
    </div>-->
    <el-scrollbar class="online-users">
      <span v-for="(val,index) in onlineUser" :key="index">
        <el-link @click="$emit('clickUser',val)" icon="el-icon-user" class="link-button">{{val}}</el-link>
      </span>
    </el-scrollbar>
  </div>
</template>
<script>
// import { WEB_SOCKET_URL } from "../Base";
// import { OnlineQueryPackage } from "../Bean";
import DateUtil from "../util/DateUtil";
export default {
  props: {
    onlineMsg: {
      type: Object,
      default() {
        return {
          time: new Date().getTime
        };
      }
    }
  },
  data() {
    return {
      onlineUser: [],
      getTime: null
    };
  },
  // computed:{
  //   arrChange(){
  //     let obj = this.onlineMsg;
  //     console.log("收到消息OnlineFrame：", obj);
  //     this.getTime = DateUtil.format(new Date(obj.time));
  //     switch (obj.type) {
  //       case 0:
  //         return this.onlineUser.filter(item => {
  //           return !obj.users.includes(item);
  //         });
  //       case 1:
  //         return this.onlineUser.concat(obj.users);
  //       case 2:
  //         console.log(1111);
  //         return obj.users;
  //         // for (let index = 0; index < 500; index++) {
  //         //   this.onlineUser.push("fasdfasdfasdfsd")
  //         // }
  //         break;
  //       default:
  //         return [];
  //     }
  //     return [];
  //   }
  // }
  watch: {
    onlineMsg() {
      // reciveMsg() {
      let obj = this.onlineMsg;
      console.log("收到消息OnlineFrame：", obj);
      // let obj = JSON.parse(e.data);
      switch (obj.type) {
        case 0:
          this.onlineUser = this.onlineUser.filter(item => {
            return !obj.users.includes(item);
          });
          break;
        case 1:
          this.onlineUser = this.onlineUser.concat(obj.users);
          break;
        case 2:
          console.log(1111);
          this.onlineUser = obj.users;
          // for (let index = 0; index < 500; index++) {
          //   this.onlineUser.push("fasdfasdfasdfsd")
          // }
          break;
        default:
          this.onlineUser = [];
      }
      // this.onlineUser = obj.users;
      // console.log("aaa")
      this.getTime = DateUtil.format(new Date(obj.time));
      // }
    }
  }
};
</script>
<style scoped>
.el-icon-user {
  padding: 2px;
}
.link-button {
  font-size: 17px;
  margin: 10px;
}
.online-frame {
  margin: 10px;
  height: inherit;
}
/* .talk-user {
  overflow: auto;
  max-height: 900px;
} */
</style>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
  /* max-height: 700px; */
  margin-bottom: 0px !important;
  height: 460px;
  /* height: 700px; */
}
</style>